/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

.event-listeners {
  width: 230px;
  padding: 20px;
  overflow-y: auto;
}

.event-listeners-content {
  padding-block: 4px;
}

.event-listeners-content ul {
  padding: 0;
  list-style-type: none;
}

.event-listeners-content button:hover,
.event-listeners-content button:focus {
  background: none;
}

.event-listener-group {
  user-select: none;
}

.event-listener-header-label {
  display: flex;
  align-items: center;
}

.event-listener-header {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.event-listeners button.event-listener-expand {
  border: none;
  background: none;
  padding: 4px 5px;
  line-height: 12px;
}

.event-listeners button.event-listener-expand:hover {
  background: transparent;
}

.event-listeners button.event-listener-expand .img {
  background: var(--theme-icon-dimmed-color);
}

.event-listener-group input[type="checkbox"] {
  margin: 0;
  margin-inline-end: 4px;
}

.event-listener-label {
  display: flex;
  align-items: center;
  padding-inline-end: 10px;
}

.event-listener-category {
  padding: 3px 0;
  line-height: 14px;
}

.event-listeners-content .arrow {
  margin-inline-end: 0;
}

.event-listeners-content .arrow.expanded {
  transform: rotate(0deg);
}

.event-listeners-content .arrow.expanded:dir(rtl) {
  transform: rotate(90deg);
}

.event-listeners-list {
  border-block-start: 1px;
  padding-inline: 18px 20px;
}

.event-listener-event {
  display: flex;
  align-items: center;
}

.event-listeners-list .event-listener-event {
  margin-inline-start: 20px;
}

.event-listener-name {
  line-height: 13px;
  padding: 3px 0;
  font-size: 12px;
}

.event-listener-event input {
  margin-inline-end: 4px;
}

.event-search-container {
  display: flex;
  margin-bottom: 10px;
  position: relative;
}

.event-search-form {
  display: flex;
  flex-grow: 1;
}

.event-search-input {
  flex-grow: 1;
  margin: 0;
  font-size: inherit;
  border: 0;
  outline: 0;
  line-height: 16px;
  color: var(--theme-body-color);
  -moz-context-properties: fill;
  fill: var(--theme-icon-dimmed-color);
  text-align: match-parent;
  background-color: #eee;
  border-radius: 4px;
  background-color: #eee;
  line-height: 16px;
  padding: 8px;
  border-radius: 4px;
}

.category-label {
  color: var(--theme-comment);
}

.event-search-input::placeholder {
  font-style: italic;
  color: var(--theme-comment);
}

.event-search-input:focus {
  border: 1px solid var(--theme-highlight-blue);
  padding: 7px;
}

.devtools-searchinput-clear {
  position: absolute;
  right: 0px;
  margin-inline-end: 8px;
}

.event-listeners-content .status {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.event-listeners-modes {
  display: flex;
  flex-direction: row;
  margin-bottom: 12px;
}

.event-listeners-modes > :not(:last-child) {
  margin-right: 8px;
}

.event-listeners-modes button {
  background: transparent;
  color: var(--theme-body-color);
  padding: 0px;
}

.event-listeners-modes button.selected {
  color: var(--primary-accent);
}

.event-listeners-modes button:hover {
  background: transparent;
  color: var(--primary-accent);
  text-decoration: underline;
}

.event-listeners-content label {
  user-select: none;
}
